import { EMAIL } from "@/utils/env"
import { ReactNode } from "react"
import Menu from "../components/Menu"

export default function Contact() {
    return (
    <div className="bg-[#0B1611] min-h-screen">
        <Menu />
        <main className="p-[16px] text-white lg:px-[70px]">
            <H1>Contact us</H1>
            <H2>Email</H2>
            <P>You can email us at <Email />. We strive to respond to allinquiries within 24-48 hours.</P>
        </main>
    </div>)
}

const H1 = ({ children }: Readonly<{ children: ReactNode }>) => <h1 className="text-[20px] font-[700] leading-[normal] not-italic mt-[16px]">{children}</h1>
const H2 = ({ children }: Readonly<{ children: ReactNode }>) => <h2 className="text-[16px] font-[500] leading-[150%] not-italic mt-[16px]">{children}</h2>
const H3 = ({ children }: Readonly<{ children: ReactNode }>) => <h3 className="text-[16px] not-italic font-[500] leading-[150%] mt-[16px]">{children}</h3>
const H4 = ({ children }: Readonly<{ children: ReactNode }>) => <h4 className="text-[12px] not-italic font-[500] leading-[150%] mt-[16px]">{children}</h4>
const P = ({ children }: Readonly<{ children: ReactNode }>) => <p className="text-[rgba(255,255,255,0.60)] text-[12px] font-[400] leading-[150%] not-italic mt-[16px]">{children}</p>
const Email = () => <a href={`mailto:${EMAIL}`} className="text-[#a5a5ff] underline">{EMAIL}</a>